<div style="padding: 16px;">

    <!-- 内容主体区域  面包屑-->
    <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>车辆管理</cite></a>
              <a><cite>车辆列表</cite></a>
            </span>

    <!-- 水平线 -->
    <hr class="layui-bg-blue">

    <!-- 搜索条件 -->
    <fieldset class="layui-elem-field">
        <legend>筛选条件</legend>
        <div class="layui-field-box">

            <div class="layui-form-item layui-form-pane">
                <form class="layui-form" action="">
                    <label class="layui-form-label">车牌号码</label>
                    <div class="layui-input-inline">
                        <input type="text" id="search_1" placeholder="请输入车牌号码" class="layui-input">
                    </div>
                    <label class="layui-form-label">车辆类型</label>
                    <div class="layui-input-inline" style="width: 150px">
                        <select id="search_2">
                            <option value="">全部</option>
                            <option value="轿车">轿车</option>
                            <option value="卡车">卡车</option>
                            <option value="客车">客车</option>
                            <option value="货车">货车</option>
                            <option value="越野车">越野车</option>
                        </select>
                        <!--                        <input type="text" id="search_2" placeholder="请输入车牌类型" class="layui-input">-->
                    </div>
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline" style="width: 150px">
                        <select id="search_3">
                            <option value="">全部</option>
                            <option value="停用">停用</option>
                            <option value="维修">维修</option>
                            <option value="空闲">空闲</option>
                            <option value="在途">在途</option>
                        </select>
                        <!--                            <input type="text" id="search_3" placeholder="请输入车辆状态" class="layui-input">-->
                    </div>
                </form>

                <div class="layui-inline" style="margin-left: 10px">
                    <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
                    <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
                    <button class="layui-btn layui-btn-radius layui-btn-success" id="insertData">新增车辆
                    </button>
                </div>
            </div>


        </div>
    </fieldset>

    <table class="layui-hide" id="test" lay-filter="test"></table>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script type="text/html" id="insert_form">
        <div class="layui-field-box">
            <form class="layui-form" action="">
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label">车辆号码</label>
                    <div class="layui-input-inline">
                        <input type="text" id="vehicle_no" class="layui-input" placeholder="请输入车辆号码">
                    </div>
                </div>
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label">车辆类型</label>
                    <div class="layui-input-inline">
                        <!-- 修改这里，将输入框改为 layui 美化的下拉框 -->
                        <select id="vehicle_type">
                            <option value="轿车">轿车</option>
                            <option value="卡车">卡车</option>
                            <option value="客车">客车</option>
                            <option value="货车">货车</option>
                            <option value="越野车">越野车</option>
                        </select>
                        <!--                            <input type="text" id="vehicle_type" class="layui-input" placeholder="请输入车辆类型">-->
                    </div>
                </div>
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label">载重</label>
                    <div class="layui-input-inline">
                        <input type="text" id="vehicle_load_capacity" class="layui-input" placeholder="请输入载重">
                    </div>
                </div>
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label">发动机号</label>
                    <div class="layui-input-inline">
                        <input type="text" id="vehicle_engine_number" class="layui-input"
                               placeholder="请输入车辆发动机号">
                    </div>
                </div>
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">

                        <select id="vehicle_status">
                            <option value="停用">停用</option>
                            <option value="维修">维修</option>
                            <option value="空闲">空闲</option>
                            <option value="在途">在途</option>
                        </select>

                        <!--                            <input type="text" id="vehicle_status" class="layui-input" placeholder="请输入状态">-->
                    </div>
                </div>
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入备注" class="layui-textarea" id="vehicle_remarks"></textarea>
                    </div>
                </div>
            </form>
        </div>
    </script>
</div>

<script>

    function flushTable() {
        tableflush();
    }

    $("#searchVal").click(function () {
        let search_1 = $("#search_1").val();
        let search_2 = $("#search_2").val();
        let search_3 = $("#search_3").val();
        tableflush(search_1, search_2, search_3);
    });

    $("#iReset").click(function () {
        $("#search_1").val("");
        $("#search_2").val("");
        $("#search_3").val("");
        tableflush();

        layui.use('form', function () {
            layui.form.render();
        });
    });

    $("#insertData").click(function () {
        layer.open({     // 弹出框处理  模态框
            type: 1               // 模态框
            , title: '新增车辆' //不显示标题栏
            , closeBtn: false
            , area: ['500px', '500px']  // 宽和高
            , shade: 0.5
            , id: 'LAY_layuipro' //设定一个id，防止重复弹出
            , btn: ['新增', '取消']
            , btnAlign: 'c'
            , moveType: 1 //拖拽模式，0或者1
            , content: $('#insert_form').html()         // 引入自定义表单
            , btn1: function (index, layero) {            // 这个是新增按钮点击事件
                // layer.msg("新增按钮执行");
                let vehicle_no = $("#vehicle_no").val();
                let vehicle_type = $("#vehicle_type").val();
                let vehicle_load_capacity = $("#vehicle_load_capacity").val();
                let vehicle_engine_number = $("#vehicle_engine_number").val();
                let vehicle_status = $("#vehicle_status").val();
                let vehicle_remarks = $("#vehicle_remarks").val();

                // layer.msg("username=" + username + "  password=" + password);
                $.ajax({
                    url: "/vehicleList",           // 请求路径
                    type: "post",                  // 请求的方式，不区分大小写
                    cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify({
                        vehicleNo: vehicle_no,
                        vehicleType: vehicle_type,
                        vehicleLoad_capacity: vehicle_load_capacity,
                        vehicleEngine_number: vehicle_engine_number,
                        vehicleStatus: vehicle_status,
                        vehicleRemarks: vehicle_remarks

                    }),
                    datatype: "json",        // 返回类型，text文本、html页面、json数据
                    success: function (response) {
                        console.log("返回: " + response);
                        if (response.code === 0) {
                            layer.msg('操作成功', {icon: 1});
                            layer.close(index);                         // 关闭当前窗口
                            flushTable()
                        } else {
                            layer.msg("操作失败！", {icon: 2});
                        }
                    },
                    error: function (response) {
                        console.log("出错返回: " + response);
                        layer.msg("操作失败！", {icon: 2});
                    }
                });
            }
            , success: function (layero) {
                // 这里是为了弹出窗口初始化数据的
                // $("#insert_username").val("这是一个测试用户名");
                layui.form.render()
            }
        });
    });

    function tableflush(search_1, search_2, search_3) {
        let param = {};
        if (search_1 === undefined || search_1 === null)
            search_1 = '';
        param.search_1 = search_1;

        if (search_2 === undefined || search_2 === null)
            search_2 = '';
        param.search_2 = search_2;

        if (search_3 === undefined || search_3 === null)
            search_3 = '';
        param.search_3 = search_3;// {name:''}

        layui.use('table', function () {
            var table = layui.table;

            table.render({
                elem: '#test'
                , url: '/vehicleList'
                , where: param
                , height: 'full-300'
                , toolbar: '#toolbarDemo'                          //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports']
                , title: '用户数据表'
                , cols: [[
                    {type: 'checkbox'}
                    , {field: 'id', title: 'ID', unresize: true, sort: true}
                    , {field: 'vehicleNo', title: '车辆号码'}
                    , {field: 'vehicleType', title: '车辆类型'}
                    , {field: 'vehicleLoad_capacity', title: '载重'}
                    , {field: 'vehicleEngine_number', title: '发动机号'}
                    , {field: 'vehicleStatus', title: '状态'}
                    , {field: 'vehicleRemarks', title: '备注'}
                    , {title: '操作', toolbar: '#barDemo'}
                ]]
                , page: true
                , limits: [5, 10, 15, 20]
            });

            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                        break;
                }
                ;
            });

            //监听行工具事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                //console.log(obj)
                if (obj.event === 'del') {
                    layer.confirm('确定删除该行吗？', function (index) {

                        $.ajax({
                            url: "/vehicleList/" + data.id,           // 请求路径
                            type: "delete",                  // 请求的方式，不区分大小写
                            cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                            contentType: "application/json;charset=utf-8",
                            data: {},
                            datatype: "json",        // 返回类型，text文本、html页面、json数据
                            success: function (response) {
                                console.log("返回: " + response);
                                if (response.code === 0) {
                                    layer.msg('操作成功', {icon: 1});   // 关闭当前窗口
                                    obj.del();
                                } else {
                                    layer.msg("操作失败！", {icon: 2});
                                }
                            },
                            error: function (response) {
                                console.log("出错返回: " + response);
                                layer.msg("操作失败！", {icon: 2});
                            }
                        });

                    });
                } else if (obj.event === 'edit') {
                    layer.open({     // 弹出框处理  模态框
                        type: 1               // 模态框
                        , title: '编辑部门' //不显示标题栏
                        , closeBtn: false
                        , area: ['500px', '500px']  // 宽和高
                        , shade: 0.5
                        , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        , btn: ['保存', '取消']
                        , btnAlign: 'c'
                        , moveType: 1 //拖拽模式，0或者1
                        , content: $('#insert_form').html()         // 引入自定义表单
                        , btn1: function (index, layero) {            // 这个是新增按钮点击事件
                            // layer.msg("新增按钮执行");
                            let id = data.id;
                            let vehicle_no = $("#vehicle_no").val();
                            let vehicle_type = $("#vehicle_type").val();
                            let vehicle_load_capacity = $("#vehicle_load_capacity").val();
                            let vehicle_engine_number = $("#vehicle_engine_number").val();
                            let vehicle_status = $("#vehicle_status").val();
                            let vehicle_remarks = $("#vehicle_remarks").val();
                            // layer.msg("username=" + username + "  password=" + password);
                            $.ajax({
                                url: "/vehicleList",           // 请求路径
                                type: "put",                  // 请求的方式，不区分大小写
                                cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                                contentType: "application/json;charset=utf-8",
                                data: JSON.stringify({
                                    id: id,
                                    vehicleNo: vehicle_no,
                                    vehicleType: vehicle_type,
                                    vehicleLoad_capacity: vehicle_load_capacity,
                                    vehicleEngine_number: vehicle_engine_number,
                                    vehicleStatus: vehicle_status,
                                    vehicleRemarks: vehicle_remarks
                                }),
                                datatype: "json",        // 返回类型，text文本、html页面、json数据
                                success: function (response) {
                                    console.log("返回: " + response);
                                    if (response.code === 0) {
                                        layer.msg('操作成功', {icon: 1});
                                        layer.close(index);                         // 关闭当前窗口
                                        flushTable()
                                    } else {
                                        layer.msg("操作失败！", {icon: 2});
                                    }
                                },
                                error: function (response) {
                                    console.log("出错返回: " + response);
                                    layer.msg("操作失败！", {icon: 2});
                                }
                            });
                        }
                        , success: function (layero) {
                            // 这里是为了弹出窗口初始化数据的
                            // $("#insert_username").val("这是一个测试用户名");
                            $("#vehicle_no").val(data.vehicleNo)
                            $("#vehicle_type").val(data.vehicleType)
                            $("#vehicle_load_capacity").val(data.vehicleLoad_capacity)
                            $("#vehicle_engine_number").val(data.vehicleEngine_number)
                            $("#vehicle_status").val(data.vehicleStatus)
                            $("#vehicle_remarks").val(data.vehicleRemarks)

                            layui.form.render();
                        }
                    });
                } else if (obj.event === 'new') {
                    layer.msg('自定义按钮触发 data=' + JSON.stringify(data));
                }
            });
        });
    }

    tableflush();

    layui.form.render();
</script>